<template>
	<view class="contain" v-if="showPage">
		<view  class="item-div" :key="obj.id">
			<image class="bg-img" src="../../static/shop/coupon/green_bg.png"></image>
			<view class="item-discount">¥{{ obj.discount }}</view>
			<view class="right">
			<view class="item-title">可用产品：{{ obj.wares.name }}</view>
			<view class="item-validity">有效期：{{ obj.validity }}天</view>
			</view>
		</view>
		<image mode="widthFix" style="width: 100vw;" src="https://gszh.qingjk.com/hy_media/hy_resource/upload/image/sczkq.png"></image>
		<view class="fiexd-btn">
			 <image style="width:200px ;height: 172px;position: absolute;left: 0rpx;top: 0rpx;" src="../../static/shop/coupon/get_now.png"></image>
			 <view class="discount">¥{{ obj.discount }}</view>
			 <view v-if="!showShare" @click="receive" class="btn">立即领取</view>
			 <button v-else class="btn-share" open-type="share">立即分享</button>
		</view>
		  <u-popup  border-radius="40" :mask-close-able="false" v-model="showSuccess" mode="center" width="640rpx" height="600rpx">
			  <view style="width: 640rpx;height: 94rpx;"></view>
		    <view class="receivSuccess">
				<image class="register-ok" style="width: 94px;height: 94px;" src="../../static/shop/coupon/register-ok.png"></image>
		          <view style="font-size: 50rpx; font-weight:bold;margin-top: 70rpx;">领取成功！</view>
		          <view style="margin: 60rpx 0rpx;font-size: 35rpx; font-weight: 500;">您的优惠券已到账</view>
		          <view @click="toShopDetail()" class="popup-btn">立即使用</view>
		    </view>
		 </u-popup>
		 <u-popup :mask-close-able="false" border-radius="54" mode="center" width="550rpx" height="300rpx"  v-model="showDialogUuid">
		 			<view class="content-title" >请先授权登录？</view>
		 			<view class="content-text">不登录无法正常体验！</view>
		 			<view class="btn-div">
		 				<navigator class="btn-cancle" open-type="exit" target="miniProgram">取消</navigator>
		 				<!-- <view class="btn-cancle" @click="handleClickCancleUuid">取消</view> -->
		 						<view class="line-xian"></view>
		 				<button @click="bindgetuser"  class="content-button"   type="success">确定</button>
		 			</view>
		  </u-popup>
		  <ComponentDialog :articleDetail="true" @getPhoneOk="init" title="申请获取手机号" tips="授权手机号后方可使用小程序!" :show="showDialogPhone"></ComponentDialog>
	</view>
</template>

<script>
	import api from '../../untils/api.js'
	import ComponentDialog from '../dialog.vue'
	export default {
		components: {
		  ComponentDialog,
		},
		data() {
			return {
				obj:null,
				couponId:0,
				productId:0,
				showShare:true,
				showSuccess:false,
				myUserId:0,
				shareUserId:0,
				showPage:false,
				showDialogUuid:false,
				showDialogPhone:false,
				openid:"",
				phone:"",
				uUID:0,
			}
		},
		onShareAppMessage(res) {
				return {
				  title: this.obj.discount + "元优惠券",
				  path: `/pages/promotionDetail/promotionDetail?couponId=${this.obj.id}&userId=${this.myUserId}`,
				   imageUrl:"https://gszh.qingjk.com/hy_media/hy_resource/upload/image/sczkq.png"
			}
		 },
		methods: {
			toShopDetail(){
				uni.navigateTo({
					url:`../detail/detail?id=${this.productId}`
				})
			},
			receive(){
				 let params = {
				      userId: Number(this.shareUserId),
				      couponId: Number(this.couponId),
				    };
					console.log(params)
				api.SM_USER_COUPON_RECEIVE(JSON.stringify(params)).then((res) => {
				       if(res.data.header.result_code==0){
						   this.showSuccess=true
					   }
				    });
			},
			init(){
				uni.login().then((res)=>{
					console.log(res[1].code)
					let obj={}
					obj.code=res[1].code
					obj.key="ZHQQ_SM"
					 api.login(JSON.stringify(obj)).then((res)=>{
						 uni.setStorageSync("phone",res.data.body.phone)
						 this.phone=res.data.body.phone
						 this.openid=res.data.body.openid
						 uni.setStorageSync("openid",res.data.body.openid)
						 this.uUID=!uni.getStorageSync("uUID")
						 if(!this.uUID){
						 	 if(this.phone){
						 		api.SM_USER_COUPON_DETAIL_FOR_SHARE(JSON.stringify(this.couponId)).then((res)=>{
						 			this.obj=res.data.body
						 			this.productId = res.data.body.wares.id;
						 			this.showPage=true;
						 		})
								api.BIZ_USER_PROFILE_SELECT_BY_USER_ID().then((res)=>{
									this.myUserId=res.data.body.id;
								})
						 		}
						 	 else {
						 	this.showDialogPhone=true 
						 	}			 
						 }
						else {
						this.showDialogUuid=true
						}
					}).catch()
				})
				
			}
		},
		onLoad(i) {
			this.couponId=i.couponId
			if(i.userId){
				this.shareUserId=i.userId
				this.showShare=false
			}
			this.init();
		}
	}
</script>

<style lang='scss' scope>
	.line-xian{
		width: 1rpx;
		height: 100%;
		background: #a3a3a3;
	}
	.btn-cancle{
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}
	.btn-div{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 100rpx;
	}
	.content-title{
		width: 100%;
		text-align: center;
		padding-top: 40rpx;
		margin-bottom: 40rpx;
		font-size: 36rpx;
		color: #000000;
		font-weight: 500;
	}
	.content-text{
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		color: #303133;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #a3a3a3;
	}
	 button::after { border: none; }
	.content-button{
	  width: 50%;
	  height: 100rpx;
	  line-height: 100rpx;
	  text-align: center;
	  font-size: 30rpx;
	  color: #303133;
	  background-color:#FFFFFF;
	}
	.popup-btn{
		width: 500rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background: rgb(47,138,255);
		color: #fff;
		border-radius: 40rpx;
		font-size: 35rpx;
	}
	.receivSuccess{
		background: #fff;
		border-radius: 30rpx;
		height: 470rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: rgb(47,138,255);
	}
	/deep/.u-mode-center-box{
		background: transparent !important;
	}
	.register-ok{
		position: absolute;
		top: 0rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 999999;
	}
	.btn-share{
		width: 132px;
		height: 44px;
		line-height: 44px;
		background: linear-gradient(180deg, #c72683 0%, #8427f7 100%);
		border-radius: 11px;
		font-size: 24px;
		font-weight: 600;
		color: #ffffff;
		text-align: center;
		position: absolute;
		bottom: 40px;
		left: 35px;
	}
	.btn{
		    width: 132px;
		    height: 44px;
			line-height: 44px;
		    background: linear-gradient(180deg, #c72683 0%, #8427f7 100%);
		    border-radius: 11px;
		    font-size: 24px;
		    font-weight: 600;
		    color: #ffffff;
			text-align: center;
			position: absolute;
			bottom: 40px;
			left: 35px;
	}
	.discount{
		   font-size: 28px;
		    font-weight: 600;
		    color: #ffffff;
			position: absolute;
			left: 0rpx;
			top: 45px;
			width: 200px;
			text-align: center;
	}
	.fiexd-btn{
		width: 200px;
		height: 172px;
		position: fixed;
		right: 30rpx;
		bottom: 50rpx;
	}
     .item-discount{
     	    font-size: 24px;
     	    font-family: PingFangSC-Semibold, PingFang SC;
     	    font-weight: 600;
     	    color: #ffffff;
     		width: 31vw;
     		height: 200rpx;
     		line-height: 200rpx;
     		padding-bottom: 60rpx;
     		text-align: center;
     		position: absolute;
     		left: 0rpx;
     		top: 0rpx;
     }
     .icon-item{
     	width: 30rpx;
     	height: 30rpx;
     	margin-left: 8rpx;
     }
     .btn-row{
     	display: flex;
     	flex-direction: row;
     	align-items: center;
     	margin-right: 20rpx;
     }
     .btn-div{
     	display: flex;
     	flex-direction: row;
     	align-items: center;
     	position: absolute;
     	left: 33vw;
     	bottom: 60rpx;
     }
     .item-validity{
     	    font-size: 12px;
     	    font-weight: 400;
     	    color: #666666;
     }
	 .right{
		 padding-top: 30rpx;
		position: absolute;
		left: 33vw;
		top: 0rpx; 
	 }
     .item-title{
     	    width: 210px;
     	    font-size: 14px;
     	    font-weight: bolder;
     	    color: #333333;
			margin-bottom: 20rpx;
     }
     .bg-img{
     	width: 100%;
     	height: 100%;
     }
     .item-div{
     	width: 710rpx;
     	height: 224rpx;
     	border-radius: 10rpx;
     	margin-top: 30rpx;
     	position: relative;
     }
</style>
